<template>
  <div>
    <div v-show="goitemType">
      <div class="radio">
        <el-radio-group v-model="PatentType" size="mini" @change="radioUpdate">
          <el-radio-button label="0">总数</el-radio-button>
          <!-- <el-radio-button label="1">公开</el-radio-button> -->
          <el-radio-button label="2">发明</el-radio-button>
          <el-radio-button label="3">实新</el-radio-button>
          <el-radio-button label="4">外观</el-radio-button>
          <!-- <el-radio-button label="5">PCT </el-radio-button> -->
          <!-- <el-radio-button label="6">海外</el-radio-button> -->
        </el-radio-group>

        <div class="newBox" v-if="institution.length">
          <div class="newBoxName">最新代理机构：</div>
          <div class="newName" v-for="item in institution" :key="item">{{ item }}</div>
        </div>
      </div>

      <div
        class="item_list"
        v-for="(item, index) in list.patent_list"
        :key="index"
        @click="goitemList(item)"
      >
        <div class="number">
          <span class="cril"></span>
          #{{ index + 1 }}
        </div>
        <div class="s_flex s_justify_content_between s_flex_column">
          <!-- <div class="item_list_img">
            <div class="img_wap">
              <img class :src="item.data.IMGNAME" alt />
            </div>
          </div> -->
          <div class="right_info">
            <div class="pantent s_flex s_align_items_center">
              <p class="sq_title3" style="color: #2a8b2d">
                {{ item.pno }}
              </p>
              <el-tag
                v-if="item.status == '授权'"
                effect="dark"
                size="small"
                color="#4ba22f"
                >授权</el-tag
              >
              <el-tag
                effect="dark"
                size="small"
                color="#4ba22f"
                v-if="item.status == '部分无效'"
                >{{ item.status }}
              </el-tag>
              <el-tag
                effect="dark"
                size="small"
                color="#4ba22f"
                v-if="item.status == '权利恢复'"
                >{{ item.status }}
              </el-tag>
              <el-tag
                effect="dark"
                size="small"
                color="#6c778b"
                v-if="item.status == '未缴年费'"
                >{{ item.status }}
              </el-tag>
              <el-tag
                effect="dark"
                size="small"
                color="#6c778b"
                v-if="item.status == '撤回'"
                >{{ item.status }}
              </el-tag>
              <el-tag
                effect="dark"
                size="small"
                color="#6c778b"
                v-if="item.status == '驳回'"
                >{{ item.status }}
              </el-tag>
              <el-tag
                effect="dark"
                size="small"
                color="#6c778b"
                v-if="item.status == '期限届满'"
                >{{ item.status }}
              </el-tag>
              <el-tag
                effect="dark"
                size="small"
                color="#6c778b"
                v-if="item.status == '避重授权'"
                >{{ item.status }}
              </el-tag>
              <el-tag
                effect="dark"
                size="small"
                color="#6c778b"
                v-if="item.status == '全部撤销'"
                >{{ item.status }}
              </el-tag>
              <el-tag
                effect="dark"
                size="small"
                color="#da7b21"
                v-if="item.status == '实质审查'"
                >{{ item.status }}
              </el-tag>
              <el-tag
                effect="dark"
                size="small"
                color="#da7b21"
                v-if="item.status == '公开'"
                >{{ item.status }}
              </el-tag>
            </div>
            <h3 class="sq_tilte3 line_h_30 sq_tilte_color content_spacing ft_weight_400">
              {{ item.tic }}
            </h3>
            <div class="sq_content sq_content_color">
              <p class="ft_weight_400 line_h_26">公开（公告）日：{{ item.pd }}</p>
              <p class="ft_weight_400 line_h_26">
                当前申请(专利权)人：{{ item.aspo }}
              </p>
            </div>
            <div class="info_text_div">
              <p class="context zy_color">摘要</p>
              <p class="context w words-hidden-2">{{ item.abso }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          background
          small
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
          align="left"
          :pager-count="5"
        >
        </el-pagination>
      </div>
    </div>
    <detail v-show="!goitemType" @back="back" :pid="pid"></detail>
  </div>
</template>

<script>
import { patentlist, companynum, expression } from "@/api/newuser";
import detail from "./details/detail";
export default {
  components: { detail },
  data() {
    return {
      total: 0,
      id: this.$route.query.id,
      page: 1,
      list: [],
      goitemType: true,
      pid: "",
      PatentType: "0",
      institution: [],
      exp: `` ,
    };
  },
  watch: {
    "form_admin.company_name": {
      handler(newV, oldV) {
        // this.getList(this.page);

        // if (this.form_admin.company_name) {
        //   patentlist({
        //     company: this.form_admin.company_name,
        //     num: "",
        //     page: 1,
        //     limit: 5,
        //     type: Number(this.PatentType),
        //   }).then((res) => {
        //     this.institution = res.list.map((res_) => {
        //       return res_.data.cro;
        //     });
        //     this.institution = [...new Set(this.institution)];
        //   });
        // }
      },
      deep: true,
    },
  },
  props: {
    PatentNumber: {
      type: Object,
      default: () => ({}),
    },
    form_admin: {
      type: Object,
      default: () => ({}),
    },
  },
  mounted() {
    // this.getList(this.page);
    this.exp = '当前权利人=' + this.form_admin.company_name;
    this.expression();

    // patentlist({
    //   company: this.form_admin.company_name,
    //   num: "",
    //   page: 1,
    //   limit: 10,
    //   type: Number(this.PatentType),
    // }).then((res) => {
    //   this.institution = res.list.map((res_) => {
    //     return res_.data.cro;
    //   });
    //   this.institution = [...new Set(this.institution)];
    // });
  },
  methods: {
    async expression() {
      if (!this.form_admin.company_name) return;
      try {
        this.list = await expression({
          exp: this.exp,
          page: this.page,
          exactSearch: 1,
          sort_column: "-PD",
        });
        if(!this.list.page) {
          this.total = 0
          this.institution = []
          return;
        }
        this.total = Number(this.list.page.total);
        if(!this.institution.length){
          this.institution = this.list.patent_list.map((res_) => {
            return res_.cro;
          });
          this.institution = [...new Set(this.institution)];
        }
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    back() {
      this.goitemType = true;
      // console.log(this.list)
      // this.getList(this.page);
    },
    // 点击详情页
    goitemList(item) {
      this.goitemType = false;
      this.pid = item.pid;
      // console.log('点了一次', item)
      sessionStorage.setItem("list_page", this.page);
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        this.page = Number(currentPage);
        this.expression();
        // let link = document.createElement("a");
        // link.setAttribute("href", "#item_one");
        // document.body.appendChild(link);
        // link.click();
        // document.body.removeChild(link);
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async getList(page) {
      if (!this.form_admin.company_name) return;
      try {
        this.list = await patentlist({
          company: this.form_admin.company_name,
          num: "",
          page: page,
          limit: 5,
          type: Number(this.PatentType),
        });
        // this.list={...this.list,count:12}
        // console.log(this.list, "list");
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    radioUpdate(value) {
      console.log(value);

      if(value == 0){
        this.exp = '当前权利人=' + this.form_admin.company_name;
      }else if(value == 2){
        this.exp = '当前权利人中文统计=' +  this.form_admin.company_name +' AND PDT = 发明';
      } else if (value == 3) {
        this.exp = '当前权利人中文统计=' +  this.form_admin.company_name +' AND PDT = 实用新型';
      } else if(value == 4){
        this.exp = '当前权利人中文统计=' +  this.form_admin.company_name +' AND PDT = 外观设计';
      }else if(value == 5){
        this.exp = '当前权利人中文统计=' +  this.form_admin.company_name +' AND PCT=是';
      }

      this.page = 1;

      this.expression();

      // this.getList(this.page);
    },
  },
};
</script>

<style scoped lang="less">
.pagination {
  margin: 10px auto;
}

.newBox {
  line-height: initial;
  margin-bottom: 10px;

  .newBoxName {
    font-size: 14px;
  }

  .newName {
    font-size: 14px;
  }
}

.item_list_img {
  // width: 188px;
  // height: 237px;
  object-fit: contain;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e6e9f0;
  border-radius: 5px;
  text-align: center;
  flex: 1;

  .img_wap {
    padding-bottom: 0;
    width: 100%;
    height: 100%;

    // position: relative;
    img {
      width: 100%;
      transition: all 0.5s ease;
      padding: 15px;
      object-fit: contain;

      &:hover {
        transform: scale(1.1);
      }
    }
  }
}

.right_info {
  flex: 2;
  margin-left: 20px;
}

.item_list {
  padding: 23px 30px;
  width: 100%;
  // margin: 0 auto 30px;
  // margin-bottom: 30px;
  background: #ffffff;
  // border: 1px solid #ced4ea;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: #f7f9fc;
  }
}

.item_list:last-child {
  margin-bottom: 0;
}

::v-deep .radio {
  .el-radio-group {
    .el-radio-button {
      margin: 5px 0;

      span {
        border-left: 1px solid #dcdfe6;
      }
    }
  }
}

@media (max-width: 750px) {
  .item_list {
    padding: 23px 15px;
  }

  .item_list_img {
    width: 100%;
    height: 237px;

    margin-bottom: 10px;
  }

  .right_info {
    margin-left: 0px;
  }
}

@media (max-width: 1360px) {
}

@media (max-width: 1280px) {
}
</style>
